<template>
  <div>
    <div class="el-card__body">
      <div>
        <i class="el-icon-search"></i>
        <span>筛选搜索</span>
        <button class="el-button el-button--primary el-button--small" @click="SearchQuery"><span> 查询结果 </span></button>
      </div>
      <form style="margin-top: 15px">
        <form class="el-form el-form--inline">
          <div class="el-form-item el-form-item--small">
            <label class="el-form-item__label" style="width: 140px">输入搜索：</label>
            <div class="el-form-item__content">
              <div class="el-input el-input--small" style="width: 203px">
                <input type="text" autocomplete="off" placeholder="品牌名称/关键字" v-model="SearchInput" class="el-input__inner" />
              </div>
            </div>
          </div>
        </form>
      </form>
    </div>
    <div class="el-card operate-container is-never-shadow" style="margin-top: 15px">
      <div class="el-card__body">
        <i class="el-icon-tickets"></i>
        <span>数据列表</span>
        <button class="btn-add el-button--default el-button--mini btn_right">添加</button>
      </div>
    </div>
    <div style="margin-top: 20px">
      <template>
        <el-table :data="BrandList" border style="width: 100%">
          <el-table-column width="60px" align="center" type="selection"> </el-table-column>
          <el-table-column prop="id" label="编号" align="center"> </el-table-column>
          <el-table-column prop="name" label="品牌名称" align="center"> </el-table-column>
          <el-table-column prop="firstLetter" label="品牌首字母" align="center"> </el-table-column>
          <el-table-column prop="sort" label="排序" align="center"> </el-table-column>
          <el-table-column prop="sort" label="品牌制造商" align="center">
            <template slot-scope="scope">
              <el-switch v-model="scope.row.factoryStatus" :active-value="1" :inactive-value="0"> </el-switch>
            </template>
          </el-table-column>
          <el-table-column prop="sort" label="是否显示" align="center">
            <template slot-scope="scope">
              <el-switch v-model="scope.row.showStatus" :active-value="1" :inactive-value="0"> </el-switch>
            </template>
          </el-table-column>
          <el-table-column label="相关" align="center" width="200px">
            <template slot-scope="scope"> 商品：{{ scope.row.productCount }} 评价：{{ scope.row.productCommentCount }} </template>
          </el-table-column>
          <el-table-column prop="address" label="操作" align="center">
            <template slot-scope="scope">
              <div>
                <el-button size="mini" @click="BrandEdit(scope.row.id)">编辑</el-button>
                <el-button type="danger" size="mini">删除</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </div>
    <div class="block" style="float: right; margin-top: 20px">
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page="currentPage4"
        :page-sizes="[5, 10, 15]"
        :page-size="pageInfo.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageInfo.total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { fetchGoodsBrandList } from '../../api/api'

export default {
  data() {
    return {
      SearchInput: '',
      BrandList: [],
      currentPage4: 4,
      // 分页 总条数
      pageInfo: {
        // 每页多少条
        pageSize: 0,
        // 当前页
        currentPage: null,
        // 总条数
        total: 0,
      },
    }
  },
  methods: {
    SearchQuery() {
      this.BrandList = this.BrandList.filter((item) => {
        return item.name !== this.SearchInput
      })
      console.log(a)
    },
    BrandEdit(id) {
      this.$router.push({ path: '/pms/updateBrand', query: { id } })
    },
    handleCurrentChange(val) {
      this.pageInfo.currentPage = val
      fetchGoodsBrandList(val, 10).then((res) => {
        this.pageInfo.total = val
      })
    },
  },
  created() {
    fetchGoodsBrandList(this.pageInfo.currentPage, 10).then((res) => {
      console.log(res.data.list)
      this.pageInfo.total = res.data.total
      this.BrandList = res.data.list
    })
  },
}
</script>

<style lang="scss">
.el-card__body {
  border: 1px solid #ebeef5;
}
.btn-add {
  border: 1px solid #dcdfe6;
  background: #fff;
}
.btn_right {
  float: right;
}
.el-button--mini,
.el-button--small {
  font-size: 12px;
  border-radius: 3px;
}
.el-button--primary {
  float: right;
}
</style>
